<template>
  <div class="CustomSelect">
    <vxe-pulldown ref="xDown3" destroy-on-close
                  @hide-panel="hidePanel"
                  class="custom_pull_down">
      <template #default>
        <div class="input_outer_warp" :class=" isShowPanel ? 'el-focus-color' : ''" @click="togglePanel">
          <div class="show_tags">

          </div>
          <i class="toggle_Icon"
             :class="isShowPanel ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
             @click.stop="togglePanel"
          ></i>
        </div>
      </template>
      <template #dropdown>
        <div class="customDropdown">
          123
        </div>
      </template>
    </vxe-pulldown>

  </div>
</template>

<script>

export default {
  name: "CustomSelect",
  props: {},
  data() {
    return {
      isShowPanel: false
    };
  },
  methods: {
    togglePanel: function() {
      this.isShowPanel = !this.isShowPanel;
      this.$refs.xDown3.togglePanel();
    },
    hidePanel: function() {
      this.isShowPanel = false;
    }
  },
  watch: {},
  mounted() {
  }
};
</script>

<style scoped>
.CustomSelect {
  width: 100%;
  height: 100%;
}

.custom_pull_down {
  width: 100%;
}

.input_outer_warp {
  width: 100%;
  height: 32px;
  padding: 0 5px;
  border-radius: 4px;
  border: 1px solid #DCDFE6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.show_tags {
  width: 94%;
  height: 90%;
  overflow: hidden;
  padding: 2px;
  display: flex;
  align-items: center;
}

.toggle_Icon {
  color: #DCDFE6;
  cursor: pointer;
}

.customDropdown {
  width: 100%;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  background-color: #fff;
  margin: 3px 0;
}
</style>